{% extends 'base.html' %}
{% block title %}Brispon Mobile{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
/*
    Slideshow style
*/

#slides {
    position:absolute;
    top:85px;
    left:4px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    If height not specified height will be set by the slide content
    Set to display none, prevents content flash
*/

.slides_container {
    width:570px;
    height:370px;
    overflow:hidden;
    position:relative;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    Offeset for the 20px of padding
    If height not specified height will be set by the slide content
    Set to display block
*/

#slides .slide {
    padding:20px;
    width:530px;
    height:230px;
    display:block;slides_container
}

.pagination {
    margin:6px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url({% url base_static "images/pagination.png" %});
    background-position:0 0;
    float:left;
    overflow:hidden;
}
.pagination li.current a {
    background-position:0 -12px;
}
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="{% url base_static "js/slides.min.jquery.js" %}"></script>
<script type="text/javascript">
$(function(){
    // Set starting slide to 1
    var startSlide = 1;
    // Get slide number if it exists
    if (window.location.hash) {
        startSlide = window.location.hash.replace('#','');
    }
    // Initialize Slides
    $('#slides').slides({
        preload: true,
        preloadImage: "",
        generatePagination: true,
        play: 2500,
        pause: 1000,
        hoverPause: true,
        // Get the starting slide
        start: startSlide,
        animationComplete: function(current){
            // Set the slide number as a hash
            window.location.hash = '#' + current;
        }
    });
});
</script>
{% endblock%}

{% block content %}
  <div class="hero-unit">
    <div id="slides">
      <div class="slides_container">
      {% for s in stores %}
        <div class="slide">
          <h2>{{ s.name }}</h2>
          sadf<br />
          <img src="{{ s.logo }}" />
          sdaf<br />
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}
